<template>
  <div class="link-layer-content flex">
    <div class="link-layer-left">
      <ul>
        <li :class="linkTypeActive == '1' ? 'active' : ''" @click="doChangeLinkType('1')">商城链接</li>
        <li :class="linkTypeActive == '3' ? 'active' : ''" @click="doChangeLinkType('3')">分类链接</li>
        <li :class="linkTypeActive == '2' ? 'active' : ''" @click="doChangeLinkType('2')">商品详情</li>
      </ul>
    </div>
    <div class="link-layer-right flex-item">
      <div v-if="linkTypeActive == '1'" class="link-list">
        <div>
          <h2 class="flex v-align-c">              
            <label></label>
            <span>自定义页面</span>
          </h2>
          <ul>
            <li v-for="(item, index) in pageList" :key="index" class="mar-r-11 mar-b-10" @click="doSetLinkType('1101', '自定义页面 - ' + item.pageTitle, item)">
              <el-button size="small" plain>{{item.pageTitle}}</el-button>
            </li>
          </ul>
        </div>
      </div>
      <component-shop-sel v-if="linkTypeActive == '2'" :appType="appType" v-on:selectGoods="doSetLinkGoods"></component-shop-sel>
      <component-category-sel v-if="linkTypeActive == '3'" :appType="appType" v-on:selectCategory="doSetLinkCategory"></component-category-sel>
    </div>
  </div>
</template>

<script>
  import commonLinkLayer from '../commonLinkLayer'
  import componentShopSel from './../ComponentShopSel'
  import componentCategorySel from './../ComponentCategorySel'
  import { listCustomPage } from '@/api/custom-page/page'

  export default {
    mixins: [commonLinkLayer],
    components: {
      componentShopSel, componentCategorySel
    },
    data() {
      return {
        appType: 13,
        // 自定义页集合
        pageList: []
      }
    },
    // 初始化页面
    created() {
      const form = {
        enterpriseId: this.getEnterpriseId(),
        appType: this.appType,
        pageType: 11
      }
      listCustomPage(form).then(response => {
        if (response.isError) return
        this.pageList = response.data
      })
    },
    methods: {
    }
  }
</script>

<style lang="less" scoped>

</style>
